<#import "/spring.ftl" as spring>
<#--引入的css样式文件-->
<link rel="stylesheet" type="text/css" href="lib/bootstrap/css/bootstrap.min.css"/>
<div style="margin-top: 10%;margin-left: 30%;width: 27%">
    <form action="/loginSystem" method="post" id="myForm" class="form-horizontal">
        <#--form-group的div开头的标签-->
        <div class="form-group">
            <label class="col-md-2 control-label" for="name">姓名</label>
            <div class="col-md-10">
                <input class="form-control" name="name" type="text" id="name" placeholder="请输入姓名,姓名必须填写"
                       value="<#if myUser?? && myUser.name ??>${myUser.name!}</#if>"/>
                 <#if myUser??>
                    <@spring.bind "myUser.name" />
                     <span style="color: red"> <@spring.showErrors ""/> </span>
                 </#if>
            </div>
        </div>
        <#--form-group的div结尾的标签-->

        <div class="form-group">
            <label class="col-md-2 control-label" for="password">密码</label>
            <div class="col-md-10">
                <input type="password" name="password" class="form-control" id="password"  placeholder="Password"
                value="<#if myUser?? && myUser.password ??> ${myUser.password!}</#if>">
                 <#if myUser??>
                    <@spring.bind "myUser.password" />
                     <span style="color: red"> <@spring.showErrors ""/> </span>
                 </#if>
            </div>
        </div>
        <div class="form-group">
            <label for="intro" class="control-label col-md-2">简介</label>
            <div class="col-md-10">
                <textarea id="intro" class="form-control" rows="3" name="intro" placeholder="Intro"></textarea>
            </div>
        </div>

        <#--<div class="form-group">-->
            <#--<label class="control-label col-md-2">性别</label>-->
            <#--<div class="col-md-10">-->
                <#--<label class="radio-inline">-->
                    <#--<input type="radio" name="gender" value="男"/>-->
                    <#--男 </label>-->

                <#--<label class="radio-inline">-->
                    <#--<input type="radio" name="gender" value="女"/>-->
                    <#--女 </label>-->
            <#--</div>-->
        <#--</div>-->

        <#--<div class="form-group">-->
            <#--<label for="hobby" class="control-label col-md-2">爱好</label>-->
            <#--<div class="col-md-10">-->
                <#--<div class="checkbox">-->
                    <#--<label>-->
                        <#--<input type="checkbox" name="hobby" value="Music">-->
                        <#--Music</label>-->
                <#--</div>-->
                <#--<div class="checkbox">-->
                    <#--<label>-->
                        <#--<input type="checkbox" name="hobby" id="" value="Game"/>-->
                        <#--Game </label>-->
                <#--</div>-->

                <#--<label class="checkbox-inline">-->
                    <#--<input type="checkbox" id="inlineCheckbox1" value="option1">-->
                    <#--option1 </label>-->
                <#--<label class="checkbox-inline">-->
                    <#--<input type="checkbox" id="inlineCheckbox2" value="option2">-->
                    <#--option3</label>-->
                <#--<label class="checkbox-inline">-->
                    <#--<input type="checkbox" id="inlineCheckbox3" value="option3">-->
                    <#--option3 </label>-->
            <#--</div>-->
        <#--</div>-->

        <#--<div class="form-group">-->
            <#--<label for="sel" class="control-label col-md-2">Select</label>-->
            <#--<div class="col-md-10">-->
                <#--<select id="sel" name="sel">-->
                    <#--<option value="1">1</option>-->
                    <#--<option value="2">2</option>-->
                    <#--<option value="3">3</option>-->
                <#--</select>-->
            <#--</div>-->
        <#--</div>-->

        <div class="form-group">
            <label for="birthDay" class="control-label col-md-2">出生日期</label>
            <div class="col-md-10">
                <input  id="birthDay" name="birthday" type="text"  readonly="readonly"
                        value="<#if myUser?? && myUser.birthday ??>${myUser.birthday?string("yyyy-MM-dd")!}</#if>"  />
                <#if myUser??>
                     <@spring.bind "myUser.birthday" />
                      <span style="color: red"> <@spring.showErrors ""/> </span>
                </#if>
             </div>
        </div>
        <div class="form-group" id="addMySpan">
            <div class="col-md-offset-2 col-md-10">
                <button type="submit" class="btn btn-primary btn-sm">
                    提交
                </button>
                <button type="button" onclick="addMySpan()" class="btn btn-primary btn-sm">
                    添加文本
                </button>
            </div>
        </div>
    </form>
</div>
<#--引入的外部的js文件-->
<script type="text/javascript" src="lib/jquery/jquery-3.1.1.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="lib/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="lib/jquery-validate/js/jquery.validate.js" charset="UTF-8"></script>
<script type="text/javascript" src="lib/laydate/laydate.js"></script>
<script type="text/javascript" src="scripts/form.js" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
    //初始化日期控件
    laydate.render({
        elem: '#birthDay', //指定元素
        format:"yyyy-MM-dd",
        type:"date"
    });
    //初始化表单验证
    MyValidator.init();

    function addMySpan(){
        $("#addMySpan").append("添加的文本");
        $("#addMySpan").append("<span id=\"name-error\" class=\"help-block\">用户名不能为空!</span>")
    }
</script>